<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>



</head>

<body>
    <div id="app">
        <!-- v-on指令 v-on:事件名称="函数名/表达式" -->
        <!-- v-on指令语法糖  简写  ==> @事件名称="函数名/表达式" -->
        <button v-on:click="num++">{{num}}</button>
        <button @click="num++">{{num}}</button>
        <button @click="incNum">{{num}}</button>
        <button @click="incNumWithParams(10)">{{num}}</button>
        <button @click="incNumWithParams()">{{num}}</button>
        <button @click="incNumWithParams">{{num}}</button>

        <!-- 事件修饰符  
         .stop 阻止事件冒泡  
         .prevent 阻止默认事件  
         .capture 捕获事件  
         .self 只触发自己  
         .once 只触发一次 -->


        <!-- <div class="outter" @click.self="hanldeOutterClick"> -->
        <div class="outter" @click.capture="hanldeOutterClick">
            我是父元素里的文本
            <!-- .stop 阻止事件冒泡 -->
            <!-- <div class="inner" @click.stop="hanldeInnerClick">我是子元素</div> -->
            <div class="inner" @click="hanldeInnerClick">我是子元素</div>
        </div>
        <!-- .prevnet 阻止默认事件 -->
        <a href="https://www.baidu.com" @click.prevent="handleAClick">百度</a>
        <!-- .once 只触发一次 -->
        <button @click.once="hanldeBtnClick">once</button>


        <!-- .enter 监听回车事件 -->
        <!-- <input type="text" @keyup.enter="handleInput"> -->
        <!-- <input type="text" @keyup.delete="handleInput"> -->
        <input type="text" @keyup.up="handleInput">
    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, reactive } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const num = ref(10)
                const incNum = () => {
                    num.value++
                }

                const incNumWithParams = (value) => {

                    num.value += value
                }
                const hanldeInnerClick = () => {
                    console.log("inner click");

                }
                const hanldeOutterClick = () => {
                    console.log("outter click");

                }
                const handleAClick = () => {
                    console.log("a click");

                }
                const hanldeBtnClick = () => {
                    console.log("btn click");

                }
                const handleInput = (e) => {
                    console.log("input change", e);
                }
                return {
                    num,
                    incNum,
                    incNumWithParams,
                    hanldeInnerClick,
                    hanldeOutterClick,
                    handleAClick,
                    hanldeBtnClick,
                    handleInput
                }
            }
        })
        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>